<!-- Ana Luisa Figón Treviño -->
<html>
	<head>
		<meta charset='utf-8'>
		<title>Ejercicio 5 CSS</title>
		<style type="text/css">
			body{
				background-image: url(http://1.bp.blogspot.com/-Ju8yfTmOauE/UE9hucx8swI/AAAAAAAACdE/ZsJS5ulUOUo/s1600/seamless_pink_background_texture.jpg);
				margin: 0;
			}
			label{
				font-weight: bold;
			}
			table{
				text-align: center;
			}
			b.text,i.text{
				font-size: 170%;
				text-decoration: underline;
			}
			h1{
				color: #FF3385;
			}
			div.principal{
				float: top;
				background-color: white;
				width: 85%;
				padding: 10;
				margin: auto;
			}
			div.projects{
				float: right;
				position: absolute;
				right: 9%;
				width: 18%;
				border: 1px solid #FF3385;
				background-color: #FFD6E7;
				text-indent: 10%;
			}
			div.form{
				width: 60%;
			}
			div.row{
				display: table-row;
			}
			div.cell{
				display: table-cell;
			}
			div.table{
				display: table;
			}
			input.text{
				background-color: #FFEFF5;
			}			
		</style>
	</head>
	<body>
		<div class='principal'>
			<div class='img'>
				<center><img src="http://www.thegamercat.com/wordpress/comics/2011-12-28-1112gamercatcomic_fairyfountain.jpg" height='40%' weight='40%'></center>
			</div>
			<div class='text'>
				<h1>About</h1>
				<p>It can be intimidating for women to learn and ask questions when they are in an <b class='text'>extreme minority</b>. While open and welcoming, today's budding developer community is up <b class='text'>91% male</b>. If we can empower more females with the confidence in their technological capabilities <i class='text'>we can begin to change this landscape</i>.</p>
			</div>
			<div class='projects'>
				<h1>Projects</h1>
				<ul>
					<li><b>USA</b></li>
					<ul>
						<li><a href=''>New York</a></li><br>
						<li><a href=''>Columbus</a></li><br>
						<li><a href=''>Austin</a></li><br>
						<li><a href=''>Philly</a></li><br>
					</ul>
					<li><b>World</b></li>
					<ul>
						<li><a href=''>Ottawa</a></li><br>
						<li><a href=''>Sidney</a></li><br>
					</ul>
				</ul>
			</div>
			<div class='casses'>
				<h1>Upcoming Classes</h1>
				<table border='1'>
					<tr align='center'>
						<td><b>Location</b></td>
						<td><b>Topic</b></td>
					</tr>
					<tr>
						<td>New York</td>
						<td>JavaScript & jQuery</td>
					</tr>
					<tr>
						<td>San Francisco</td>
						<td>HTML & CSS</td>
					</tr>
				</table>
			</div>
			<div class='form'>	
				<h1>Sign Up!</h1>
				<form>
					<div class='table'>
						<div class='row'>
							<div class='cell'><label>Name: </label></div>
							<div class='cell'><input type='text' class='text' name='name' value=''></div>
						</div>
						<div class='row'>
							<div class='cell'><label>E-mail: </label></div>
							<div class='cell'><input type='text' class='text' name='mail' value=''></div>
						</div>
						<div class='row'>
							<div class='cell'><label>Location: </label></div>
							<div class='cell'>
								<select name='location'>
									<option value='san francisco'>San Francisco</option>
									<option value='new york'>New York</option>
									<option value='texas'>Texas</option>
								</select>
							</div>
						</div>
					</div>					
					<fieldset>
						<legend>Gender: </legend>
						<label>Female </label><input type='radio' name='gender' value='female'>
						<label>Male </label><input type='radio' name='gender' value='male'>
					</fieldset>
					<label>Experience: </label><br>
					<textarea rows="4" cols="50"></textarea><br>
					<input type='submit' value='Sign Up!'>
				</form>
			</div>
			<br>
			<center><a href='http://www.twitter.com'>Twitter</a>  |  <a href='http://www.facebook.com'>Facebook</a>  |  <a href='http://www.flickr.com'>Flickr</a></center>
		</div>
		<div>
			<br><br><br><br>
		</div>
	</body>
</html>